<template>
  <div class="disFlx">
    <a-select
      v-model="formId"
      allowClear
      placeholder="请选择"
      @change="handleChange"
      class="_pt-4 _mr-5"
      style="max-width: calc(50% - 85px);min-width: 150px;"
    >
      <a-select-option v-for="(item, index) in formItemList" :key="index" :value="item.id">
        {{ item.showName }}
      </a-select-option>
    </a-select>
    <div style="min-width: 180px;flex-shrink: 0;flex:1;">
      <template v-if="formId">
        <a-select
          v-if="
            currentItem.itemType === 'CheckboxGroup' ||
              currentItem.itemType === 'RadioGroup' ||
              currentItem.itemType === 'Select'
          "
          :mode="currentItem.itemType === 'CheckboxGroup' ? 'multiple' : 'default'"
          v-model="currentItem.content"
          allowClear
          :placeholder="currentItem.value || '选择字段对应的选项值'"
          :disabled="currentItem.disabled"
        >
          <a-select-option v-for="(item, index) in currentItem.customFormItemAnswerList" :key="index" :value="item.id">
            {{ item.words }}
          </a-select-option>
        </a-select>
        <a-input
          v-else-if="
            currentItem.itemType === 'Honor' ||
              currentItem.itemType === 'InputTextArea' ||
              currentItem.itemType === 'ChooseLocation'
          "
          v-model="currentItem.content"
          :placeholder="currentItem.value || '输入字段对应的关键词'"
          :disabled="currentItem.disabled"
          allowClear
        />
        <Form v-else :item="[currentItem]" />
      </template>
    </div>
  </div>
</template>

<script>
import { getQueryFormItemList } from '@/api/activity/activity'
import Form from '@/components/Form'
import { isArray } from 'lodash-es'

export default {
  components: {
    Form
  },
  props: {
    activityId: Number | String
  },
  data() {
    return {
      formId: undefined,
      formItemList: [],
      currentItem: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getQueryFormItemList(this.activityId).then(res => {
        this.formItemList = res.data.filter(item => item.isInternalInterface != 2)
      })
    },
    handleChange(e) {
      const item = this.formItemList.find(v => v.id === e)
      this.currentItem = item
    },
    // 返回搜索条件对象
    getQueryParams() {
      // Input InputTextArea Honor InputNumber
      // InputPhone YearPicker MonthPicker DatePicker
      // TimePicker AreaPicker ChooseLocation RadioGroup CheckboxGroup
      // Select InputSearch
      if (!this.currentItem) return
      let isItemAnswerId = ['RadioGroup', 'CheckboxGroup', 'Select', 'AreaPicker']
      if (isItemAnswerId.includes(this.currentItem.itemType)) {
        return {
          itemId: this.currentItem.id,
          itemAnswerId: isArray(this.currentItem.content)
            ? this.currentItem.content
            : this.currentItem.content
            ? [this.currentItem.content]
            : undefined,
          itemValue: undefined
        }
      } else {
        return {
          itemId: this.currentItem.id,
          itemAnswerId: undefined,
          itemValue: this.currentItem.content
        }
      }
    },
    resetData() {
      this.formId = undefined
      this.currentItem = {}
    }
  }
}
</script>

<style lang="less" scoped></style>
